<template>
  <div class="newList">
      <special v-for="item in special" :key="item.id" :obj="item"></special>
      <div class="bg" v-if="special.length !== 0 && normal.length !== 0"></div>
      <normal v-for="(item,index) in normal" :key="item.id" :obj="item" :last="index === (normal.length - 1)"></normal>
  </div>
</template>

<script>
import normal from './normal'
import special from './special'
export default {
	name: 'newList',
	components: {
		normal,
		special,
	},
	props: {
		list: {
			type: Array,
			default: function () {
				return [{
					id: 1,
					title:
            '外媒披露：字节跳动12个月内启动Tik Tok纽约上市将保留控股权将保留控股权将保留控股权',
					origin: '广西糖办',
					time: '2020-12-24',
					count: '500', 
				}]
			},
		},
	},
	watch: {
		list: {
			handler(newval) {
				console.log(newval)
				this.special = []
				this.normal = []
				if (newval.length === 0) {
					return
				}
				this.special = newval.filter(el => el.top === 0)
				// console.log('special', this.special)
				if (this.special.length > 5) {
					this.special = this.special.slice(0, 5)
				}
				this.normal = newval.filter(el => el.top === 1)
				// console.log('normal', this.normal)
			},
			immediate: true,
		},
	},
	data () {
		return {
			special: [],
			normal: [],
		}
	},

	methods: {},
}
</script>

<style lang='scss' scoped>
.newList{
    .bg {
        width: 100%;
        height: 10px;
        background-color: #eee;
    }
}
</style>
